<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<div class="layui-carousel" id="preview">
					<div id="carousel-item" carousel-item>
					<!-- 	<img src="../images/static/temp/banner1.jpg" /> -->
					</div>
				</div>

				<!-- <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户性别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户城市</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户职业</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classify" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset> -->

				<script type="text/html" id="toolbarDemo">
								<div class="layui-btn-container">
				                <button class="layui-btn layui-btn-sm data-add-btn"> 添加 </button>
				                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"> 删除 </button>
				            </div>
				        </script>
				
								<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
								
								<script type="text/html" id="currentTableBar">
								    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
								    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
								</script>
			</div>
		</div>
		<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../js/lay-config.js" charset="utf-8"></script>
		<script>
			
			
			
			layui.use(['form', 'table', 'carousel', 'http'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					layuimini = layui.layuimini;
				
				var http = layui.http;
				
				console.log(http)
					
				
				var carousel = layui.carousel;
				//建造轮播图实例
				var ins = carousel.render({
					elem: '#preview',
					width: '100%' //设置容器宽度
						,
					autoplay: true,
					arrow: 'always' //始终显示箭头
					//,anim: 'updown' //切换动画方式
				});
				
				
				
				/**
				 * 轮播图预览
				 */
				$.ajax(http.base_url + '/img/carousel',{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(data)
						let list = data.data;
						$.each(list, function(index, item){
							console.log(item.src)
							$('#carousel-item').append($("<img src="+"http://47.114.97.182/"+item.src+">"))
							//重置轮播
							ins.reload({
								elem: '#preview',
								width: '100%', //设置容器宽度
								arrow: 'always', //始终显示箭头
								autoplay: true
								//,anim: 'updown' //切换动画方式
							});
						})
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
				
				/**
				 * 获取所有图片,数据表格分页显示
				 */
				table.render({ 
					elem: '#currentTableId',
					url: http.base_url + '/img/getAll',
					toolbar: '#toolbarDemo',
					parseData: function(res) { //res 即为原始返回的数据
						return {
							"code": res.errorCode, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.data //解析数据列表
						};
					},
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],
					cols: [
						[{
								type: "checkbox",
								width: 50,
								fixed: "left"
							},
							{
								field: 'id',
								width: 80,
								title: 'ID',
								sort: true
							},
							{
								field: 'src',
								width: 180,
								title: '图片地址'
							},
							{
								field: 'background',
								width: 180,
								title: '背景色',
								sort: true
							},
							{
								field: 'type',
								width: 90,
								title: '图片类型',
								templet: function(d) {
									if (d.type === 0) {
										return "轮播图"
									}
									if (d.type === 1) {
										return "秒杀"
									}
									if (d.type === 2) {
										return "团购"
									}
									if (d.type === 3) {
										return "分类"
									}
									if (d.type === 4) {
										return "猜你喜欢"
									}
									if (d.type === 5) {
										return "其他"
									}

								}
							},
							{
								field: 'url',
								title: '目标地址',
								minWidth: 150
							},
							{title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
						]
					],
					limits: [10, 15, 20, 25, 50, 100],
					limit: 5, //每页5条
					page: true
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var result = JSON.stringify(data.field);
					layer.alert(result, {
						title: '最终的搜索信息'
					});

					//执行搜索重载
					table.reload('currentTableId', {
						page: {
							curr: 1
						},
						where: {
							searchParams: result
						}
					}, 'data');

					return false;
				});

				// 监听添加操作
				$(".data-add-btn").on("click", function() {

					layer.open({
						title: '添加图片',
						type: 2,
						anim: 1,
						area: ['500px', '320px'],
						content: ['add.html'],
						end: function() {
							table.reload('currentTableId');
							location.reload(true);
						}
					});

					//成功提示
					//layer.alert('酷毙了', {icon: 1});
					//失败提示
					//layer.msg('不开心。。', {icon: 5});


					return false;
				});

				// 监听删除操作
				$(".data-delete-btn").on("click", function() {
					var checkStatus = table.checkStatus('currentTableId'),
						data = checkStatus.data;
						table.reload('currentTableId');
						
					var id_list = []; //id列表
					$.each(data, function(index, item) {
						id_list.push(item.id)
					})
					
					//批量删除
					$.ajax( http.base_url + '/img/delete',{
						data: {
							ids: id_list
						},
						traditional :true,
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						ContentType: 'application/json',
						timeout:10000,//超时时间设置为10秒；
						success:function(data){
							
							layer.alert('酷毙了', {icon: 1});
							//删除成功后刷新当前页
							table.reload('currentTableId',{page:{curr:$(".layui-laypage-em").next().html()}})
						},
						error:function(xhr,type,errorThrown){
							
						},
					});
				});

				//监听表格复选框选择
				table.on('checkbox(currentTableFilter)', function(obj) {
					console.log(obj)
				});

				table.on('tool(currentTableFilter)', function(obj) {
					var data = obj.data;
					if (obj.event === 'edit') { // 编辑操作
						//调用编辑函数,打开弹出层
						//传入id
						editImage(data)
						
					} else if (obj.event === 'delete') { // 删除单个操作
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
							
							$.ajax(http.base_url + '/img/delete',{
								data: {
									ids: obj.data.id
								},
								traditional :true,
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								ContentType: 'application/json',
								timeout:10000,//超时时间设置为10秒；
								success:function(data){
									layer.alert('酷毙了', {icon: 1});
									table.reload('currentTableId');
									location.reload(true);
									//删除成功后刷新当前页
									table.reload('currentTableId',{page:{curr:$(".layui-laypage-em").next().html()}})
								},
								error:function(xhr,type,errorThrown){
									
								}
							});
						});
					}
				});
				
				//编辑图片
				function editImage(edit){
				    var index = layui.layer.open({
				        title : "编辑图片",
				        type : 2,
				        content : "edit.html",//弹出层页面
				        area: ['500px', '560px'],
				        success : function(layero, index){
				            var body = layui.layer.getChildFrame('body', index);
				            if(edit){
					            // 取到弹出层里class="id"的元素
					            body.find(".id").val(edit.id);  //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
					            
					            // 记得重新渲染表单
					            form.render();
				            }
				            setTimeout(function(){
				                layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
				                    tips: 3
				                });
				            },500)
				        }
				    })
				    //layui.layer.full(index);//设置弹出层布满窗口
				    //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
				    $(window).on("resize",function(){
				        //layui.layer.full(window.sessionStorage.getItem("index"));
				    })
				}

			});
			
			
		</script>


	</body>
</html>
